<template>
  <div class="song__list" >
    <div class="song__list--bg" :style="`background: url('${state.playlist.coverImgUrl}')`"></div>
    <mHeaderVue :isblack="false" :showback="true" :title="'歌单'"></mHeaderVue>
    <div class="songlist__content">
      <mSonglistDscVue :desc="state.playlistdsc"></mSonglistDscVue>
      <mSonglistSongsVue :tracks=" state.playlist.tracks"></mSonglistSongsVue>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive } from "@vue/runtime-core";
import { useRoute } from "vue-router";
import mHeaderVue from "../components/m-header.vue";
import mSonglistDscVue from "../components/m-songlist-dsc.vue";
import mSonglistSongsVue from "../components/m-songlist-songs.vue";
import { getListDetail } from "../request/api";
// 数据
const route = useRoute()
const state = reactive({
  playlist:{},
  playlistdsc:{},
})
onMounted(async ()=>{
  let res = await getListDetail({id:route.params.id})
  state.playlist = res.playlist
  // 结构获取渲染数据
  const { description,coverImgUrl,name,playCount} = state.playlist
  // 歌单介绍数据
  state.playlistdsc = {
    description,
    coverImgUrl,
    name,
    playCount
  }
})
</script>
<style lang="stylus">
.song__list
  overflow hidden
.song__list--bg
  position absolute
  width 100vw
  height 100vh
  background-image url('../assets/1.jpg')
  // transform: scale(1.2); 
  background-position center center
  filter: contrast(90%);
  z-index -999
.songlist__content
  margin-top 15px
  overflow hidden
  overflow-y scroll
  height calc(100vh - 50px)
</style>